<template>
<div class="cartcontrol">
	<div class="cart-decrease el-icon-minus" v-show="food.count>0" @click="decreaseCart"></div>
    <div class="cart-count" v-show="food.count>0">{{food.count}}</div>
    <div class="cart-add el-icon-plus" @click="addCart"></div>
</div>
</template>

<script>
    import Vue from 'vue';
	export default {
      props: {
          food: {
              type: Object
          }
      },
      create() {
          console.log(this.food);
      },
      methods: {
          addCart(event) {
              // 屏蔽插件派发的点击事件
              if (!event._constructed) {
                  return;
              }
              console.log('click');
              if (!this.food.count) {
                  // this.food.count = 1;
                  Vue.set(this.food, 'count', 1);
              } else {
                  this.food.count++;
              }
              this.$emit('cart.add', event.target);
          },
          decreaseCart(event){
               // 屏蔽插件派发的点击事件
              if (!event._constructed) {
                  return;
              }
              console.log('click');
              if (this.food.count) {
                  this.food.count--;
              }
          }
      }
	};
</script>

<style type="text/css">

    .cart-decrease{
        display: inline-block;
        padding: 6px;
        font-size:20px;
        line-height:20px;
        color: rgb(0,160,220);
    }

    .cart-count{
        display: inline-block;
        vertical-align: top;
        width: 20px;
        padding-top: 0px;
        line-height: 24px;
        text-align: center;
        font-size: 20px;
        color:rgb(147, 153, 159);       
    }

    .cart-add{
        display: inline-block;
        font-size: 20px;
        line-height: 20px;
        color: rgb(0,160,220);
    }
</style>
